<template>
  <div ref="echarts_box" :style="{ width, height }">
  </div>
</template>

<script>
  import fontSize from "@/utils/fontSize";
  import Echarts from 'echarts'
  export default {
    name: "HorizontalBar",
    watch: {
      data: {
        // 对对象进行深度监听
        handler(nv) {
          if (!nv.length) return
          this.drawLine(nv);
        },
        immediate: true,
        deep: true,
      },
      labelSize: "drawLine", // 数值变化是更新图表
      unit: "drawLine", // 数值变化是更新图表
      barWidth: "drawLine", // 数值变化是更新图表
      axisLabel: "drawLine", // 数值变化是更新图表
      extraLegend: "drawLine", // 数值变化是更新图表
    },
    props: {
      // 在外层加一个固定宽高的容器，否则可能不显示
      width: {
        type: Number | String,
        default: '100%'
      },
      height: {
        type: Number | String,
        default: '100%'
      },
      labelSize: {
        type: [Number, String],
        default: 12
      },
      extraLegend: {
        type: Object,
        default: () => ({})
      },
      axisLabel: {
        type: [Number, String],
        default: 12
      },
      barWidth: {
        type: [Number, String],
        default: 10
      },
      unit: {
        type: String,
        default: '个'
      },
      data: {
        // 返回的数据
        type: Array,
        default: function () {
          return [];
        },
      },
      // yAxisData: {
      //   type: Array,
      //   default: () => ["健身房", "运动馆", "兴趣班", "学校", "地铁", "公交站"]
      // },
      // seriesData: {
      //   type: Array,
      //   default: () => [157, 130, 150, 63, 6, 78]
      // }
    },
    data() {
      return {
        myChart: null,

      };
    },
    mounted() {
      // this.drawLine(this.data)
    },
    methods: {
      drawLine(data) {
        let xData = [];
        let yData = [];

        data.forEach(item => {
          xData.push(item.name);
          yData.push(item.value);
        })
        this.$nextTick(() => {
          this.myChart = this.$echarts.init(this.$refs.echarts_box);

          let option = {
            tooltip: {
              trigger: "axis",
              axisPointer: {
                type: "shadow",
              },
            },
            color: ['#3395ff'],
            legend: {
              show: false
            },
            grid: {
              top: 0,
              left: "1%",
              right: "0%",
              bottom: "0%",
              containLabel: true,
              ...this.extraLegend
            },
            xAxis: {
              type: "value",
              // boundaryGap: [0, 1],
              axisLabel: {
                show: true,
                color: '#fff',
                fontSize: fontSize.fontSize(this.axisLabel),
                fontWeight: 'bold',
                formatter: '{value}' + this.unit
              },
              axisLine: {
                lineStyle: {
                  color: "rgba(207,238,252,0.2)",
                },
              },
              axisTick: {
                //y轴刻度线

                show: false,
              },
              splitLine: {
                // show: false,
                lineStyle: {
                  color: "rgba(207,238,252,0.2)",
                },
              },
            },
            yAxis: {
              type: "category",
              data: xData,
              axisLine: {
                show: false,
                lineStyle: {
                  color: "rgba(207,238,252,0.2)",
                },
              },
              axisTick: {
                //y轴刻度线

                show: false,
              },
              splitLine: {
                lineStyle: {
                  color: "rgba(126,159,182,0.12)",
                },
              },
              axisLabel: {
                show: true,
                color: '#fff',
                fontSize: fontSize.fontSize(this.axisLabel),
                fontWeight: 'bold',
                interval: 0
              }
            },
            series: [
              {
                type: "bar",
                data: yData,
                barWidth: fontSize.fontSize(this.barWidth),
                label: {
                  show: true,
                  fontSize: fontSize.fontSize(this.labelSize),
                  position: 'right',
                  color: '#3395FF',
                  formatter: '{c}' + this.unit
                }
              },
            ],
          }
          this.myChart.setOption(option)
        })
      },
    },
  };
</script>

<style lang="scss" scoped>
  #horizontalBarContainer {
    width: 100%;
    height: 100%;
  }
</style>